<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Timeline 时间线</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<script src="../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
	
<style type="text/css">
.el-timeline-item__node--diy{
	left: -6px;
	width: 20px;
	height: 20px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">Timeline 可拆分成多个按照时间戳排列的活动， 时间戳是其区分于其他控件的重要特征， 使用时注意与 Steps 步骤条等区分。</p>
	<el-timeline>
		<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
			{{ activity.content }}
		</el-timeline-item>
		<el-timeline-item key="10" timestamp="2022-06-20">手动新增的</el-timeline-item>
		<el-timeline-item key="11" timestamp="2022-06-21">手动新增的1</el-timeline-item>
		<el-timeline-item key="12" timestamp="2022-06-22">手动新增的2</el-timeline-item>
	</el-timeline>
	
	<el-divider content-position="left">定义节点样式</el-divider><!-- =============================================================== -->
	<p class="desc">可根据实际场景自定义节点尺寸、颜色，或直接使用图标。</p>
	<el-timeline>
		<el-timeline-item v-for="(activity, index) in activities2" :key="index" :icon="activity.icon" :type="activity.type"
			:color="activity.color" :size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
			{{ activity.content }}
		</el-timeline-item>
	</el-timeline>
	
	<el-divider content-position="left">自定义时间戳</el-divider><!-- =============================================================== -->
	<p class="desc">当内容在垂直方向上过高时，可将时间戳置于内容之上。</p>
	<el-timeline>
		<el-timeline-item :hide-timestamp="isTrue" timestamp="节点1" placement="top">
			<h3>自定义标签</h3>
			<el-card>
				<h4>Update Github template</h4>
				<p>Tom committed 2018/4/12 20:46</p>
			</el-card>
		</el-timeline-item>
		<el-timeline-item :hide-timestamp="isFalse" timestamp="2018/4/12" placement="top" type="success">
			<template #default="scope">
				<h3>自定义标签2</h3>
				<el-card>
					<h4>Update Github template</h4>
					<p>Tom committed 2018/4/12 20:46</p>
				</el-card>
			</template>
			
			<template #dot>
				<h3>自定义dot</h3>
			</template>
		</el-timeline-item>
		<el-timeline-item timestamp="2018/4/3" placement="top">
			<el-card>
				<h4>Update Github template</h4>
				<p>Tom committed 2018/4/3 20:46</p>
			</el-card>
		</el-timeline-item>
		<el-timeline-item timestamp="2018/4/2" placement="top">
			<el-card>
				<h4>Update Github template</h4>
				<p>Tom committed 2018/4/2 20:46</p>
			</el-card>
		</el-timeline-item>
	</el-timeline>
	
	<el-divider content-position="left">垂直居中</el-divider><!-- =============================================================== -->
	<p class="desc">垂直居中样式的 Timeline-Item</p>
	<el-timeline>
		<el-timeline-item center timestamp="2018/4/12" placement="top">
			<el-card>
				<h4>Update Github template</h4>
				<p>Tom committed 2018/4/12 20:46</p>
			</el-card>
		</el-timeline-item>
		<el-timeline-item timestamp="2018/4/3" placement="top">
			<el-card>
				<h4>Update Github template</h4>
				<p>Tom committed 2018/4/3 20:46</p>
			</el-card>
		</el-timeline-item>
		<el-timeline-item center timestamp="同天" placement="top">
			Event start
		</el-timeline-item>
		<el-timeline-item timestamp="2018/4/2" placement="top">
			Event end
		</el-timeline-item>
	</el-timeline>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			isTrue: true,
			isFalse: false,
			activities: [
				{content: 'Event start',timestamp: '2018-04-15',},
				{content: 'Approved',timestamp: '2018-05-13',},
				{content: 'Success',timestamp: '2018-06-11',},
			],
			activities2: [
				{content: '定制 icon',timestamp: '2018-04-12 20:46',size: 'diy',type: 'success',icon: ElementPlusIconsVue.Check,},
				{content: '定制 color',timestamp: '2018-04-03 20:46',color: '#0bbd87',},
				{content: '定制 size',timestamp: '2018-04-03 20:46',size: 'large',},
				{content: '定制 hollow',timestamp: '2018-04-03 20:46',type: 'primary',hollow: true,},
				{content: '默认节点',timestamp: '2018-04-03 20:46',},
			],
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
app.mount("#app");

</script>
</html>